<script setup lang="ts">
import {ref} from "vue";
import FormBuilderContainer from '@/components/materia-outline/FormBuilderContainer.vue'
import FormBuilderOutline from '@/components/materia-outline/FormBuilderOutline.vue'
import FormBuilderFile from '@/components/materia-outline/FormBuilderFile.vue'
type Mode = 'file' | 'wallet' | 'codepen' | 'container' | null;
const mode = ref<Mode>('wallet');
const toggleMode = (newMode: Mode)=>{
  if(newMode === mode.value){
    mode.value = null;
  }else{
    mode.value = newMode;
  }
}
</script>

<template>
  <div class="zhtt-form-builder-generator-left">
    <div class="zhtt-form-builder-generator-outline">
      <div class="zhtt-icon-wrap" :class="{active: mode==='file'}" title="大纲" @click="toggleMode('file')">
        <file-text-outlined />
      </div>
      <div class="zhtt-icon-wrap" :class="{active: mode==='wallet'}" title="物料" @click="toggleMode('wallet')">
        <wallet-outlined />
      </div>
      <div class="zhtt-icon-wrap" :class="{active: mode==='codepen'}" title="代码" @click="toggleMode('codepen')">
        <codepen-outlined />
      </div>
      <div class="zhtt-icon-wrap" :class="{active: mode==='container'}" title="配置" @click="toggleMode('container')">
        <container-outlined />
      </div>
    </div>
    <Transition>
      <div class="zhtt-form-builder-generator-material" v-show="mode">
        <!--大纲-->
        <div v-if="mode==='file'">
          <FormBuilderFile></FormBuilderFile>
        </div>
        <!--配置-->
        <div v-else-if="mode==='container'" style="height: 100%;">
          <FormBuilderContainer></FormBuilderContainer>
        </div>
        <div v-else-if="mode === 'wallet'">
        <!--物料-->
          <FormBuilderOutline></FormBuilderOutline>
        </div>
        <div v-else>
          <FormBuilderOutline></FormBuilderOutline>
        </div>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
.zhtt-form-builder-generator-left{
  background: #fff;
  display: flex;
}
.zhtt-form-builder-generator-outline{
  padding:8px;
}
.zhtt-icon-wrap{
  display: flex;
  justify-content: center;
  width: 50px;
  height: 50px;
  cursor: pointer;
  align-items: center;
  border-radius: 8px;
  &:hover{
    background: #f5f5f5;
    transition: all 0.2s ease-in-out;
  }
}
.zhtt-icon-wrap.active {
  color: var(--color-text);
  background-color: #f2f2f2;
}
.zhtt-form-builder-generator-material{
  background: #fff;
  width:240px;
  border-left:1px solid #f2f2f2;
  height:100%;
  overflow:auto;
}
</style>
